Попередня сторінка: 24. Списки в HTML
Наступна сторінка: 26. Додавання гіперпосилань на вебстор...
25.1.
ФОН ВЕБСТОРІНКИ
Вебсторінка стає більш наочною та цікавою, якщо її доповнити зображеннями та графічними елементами. Для формування фону вебсторін-ки у вигляді зображення використовують атрибут background для тегу
Тут URL — адреса файла зображення.
Так з допомогою коду <body background="fon.jpg"></body> буде створено фон вебсторінки, заповнений зображенням (рис. 25.1). Тут fon.jpg — файл, що містить дане зображення. Зверніть увагу, що в даному випадку файл має бути розміщений у тій же папці, що і файл веб-сторінки.
Якщо зображення міститься у деякій папці, наприклад, img, необхідно вказати повний шлях до файла з урахуванням папки розташування. Наприклад, img/1.jpg.
ПРАКТИЧНЕ ЗАВДАННЯ 1
Додайте фонове зображення до деякої вебсторінки.
1. Завантажте на комп’ютер папку pz_l для даного уроку. Ця папка має містити html-файл index.html та зображення фону fon.png.
2. Уведіть після тега <body> атрибут background="fon.png".
3. Збережіть файл та відкрийте його у вікні браузера. В результаті фон має бути заповнений зображенням fon.png.
25.2.
ДОДАВАННЯ ЗОБРАЖЕНЬ
Для вставки зображень використовують тег <img>. Даний тег має обов’язковий атрибут src, значенням якого є адреса файла зображення:
Так з допомогою коду <img src= "laptop.png"> буде додано зображення ноутбука (рис. 25.2). Тут laptop.png — файл, що містить дане зображення.
Зверніть увагу, що в даному випадку файл розміщений у тій же папці, що і файл вебсторінки. Якщо зображення буде розміщено у деякій папці, слід указати повний шлях до файла з урахуванням папки розташування.
ПРАКТИЧНЕ ЗАВДАННЯ 2
Додамо необхідні зображення до сайту BestTravel. Тут мають бути зображення логотипу та готелів.
1. Розташуйте файли зображень у папці збереженого проєкту.
2. Уведіть тег додавання зображення логотипу:
3. Аналогічно введіть теги для додавання зображень готелів.
4. Збережіть файл та відкрийте його у вікні браузера. В результаті рисунки буде додано, але логотип буде мати дуже великі розміри.
25.3.
РОЗМІРИ ЗОБРАЖЕНЬ
Для зміни розмірів зображень використовуються атрибути width, що визнає ширину зображення, та атрибут height, для встановлення висоти зображення.
Так, у коді<img src = "laptop" width="200" height="100"> зображення буде мати ширину 200 пікселів, а висоту 100 пікселів.
Але в цьому випадку розміри зображення не завжди є пропорційними. Якщо вказати лише один із розмірів, ширину або висоту, то другий вимір браузер обчислить самостійно, виходячи з пропорцій зображення.
Розмір зображення можна також задавати у відсотках. Це значення встановлюється відносно розмірів ширини та висоти сторінки браузера. Цей спосіб є зручним, коли необхідно, аби при зменшенні або збільшенні сторінки зображення пропорційно змінювало свій розмір. Наприклад, при використанні даного коду <img src="laptop" width="50%"> ширина зображення буде мати 50% свого початкового розміру, тобто зменшена у два рази, відповідно його висота буде змінена пропорційно до зміни розмірів ширини.
ПРАКТИЧНЕ ЗАВДАННЯ 3
Додайте атрибут ширини для логотипу сайту BestTravel.
1. Установіть значення ширини логотипу 50 пікселів, додавши атрибут width="50". Значення висоти не вказуйте, аби зображення було зменшено пропорційно.
2. Збережіть html-код.
3. Відкрийте файл у вікні браузера. В результаті зображення логотипу має бути зменшено.
25.4. ДОДАВАННЯ ВІДЕО. ПРАКТИЧНЕ ЗАВДАННЯ 4
Додайте відео до вебсторінки.
Відео, яке нам необхідно додати, завантажено до сервісу YouTube. Отже, ви маєте вставити посилання на дане відео.
1. Відкрийте сторінку за посиланням:
https://youtu.be/dvW1IVvo-Z0
.
2. Оберіть посилання Поділитися .
3. Клацніть на значок
У результаті на сайті буде сформовано готовий html-код з тегом <iframe> з різними атрибутами.
4. Скопіюйте в необхідне місце тег <iframe>...</iframe> до html-коду вашої сторінки.
5. Збережіть код та оновіть вікно браузера. В результаті відео буде розташоване на сторінці.
Контрольні запитання та завдання
1. Як додати фонове зображення до вебсторінки?
2. Як додати до вебсторінки зображення?
3. В яких випадках у нагоді стане використання альтернативного тексту?
4. Які існують способи вирівнювання зображення відносно тексту?
5. Як установити відступи від зображень?
6. Як додати рамку до зображення?
Питання для роздумів
1. Де на практиці використовується виведення тексту при наведенні на зображення?
2. Для чого використовуються два способи встановлення розмірів зображень: у пікселях та у відсотках?
Завдання для досліджень
1*. Чи можна при встановленні рамки зображення змінити її колір? 2*. Чи можна засобами мови HTML вирівняти зображення по центру, аби текст його обтікав ліворуч та праворуч?
3**. Дослідіть, як додати до вебсторінки відео із файла на диску.
Це матеріал з підручника Інформатика 8 клас Казанцева, Стеценко (2021)
Наступна сторінка: 26. Додавання гіперпосилань на вебстор...